<template>
  <el-dialog title="绑定角色" :visible.sync="visible" width="540px"
             @close="$emit('update:show', false)">
    <el-transfer
      filterable
      :titles="['待选', '已选']"
      filter-placeholder="可输入关键词过滤"
      v-model="selected"
      :data="roles"
      :props="{
			  key: 'id',
			  label: 'description'
			}">
    </el-transfer>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="save">保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>
    export default {
      name: "BindRoleDialog",
      props: ['userData', 'show'],
      watch: {
        show () {
          this.visible = this.show;
        },
        userData () {
          if(this.userData && this.userData.roleList){
            for(let i=0; i<this.userData.roleList.length; i++){
              this.selected.push(this.userData.roleList[i].id);
            }
          }
        }
      },
      data() {
        return {
          visible: this.show,
          roles: [],
          selected: []
        }
      },
      mounted: function() {
        this.selected = [];
        this.api.post('/role/queryAll', {})
          .then((data) => {
            data = data.data
            for(let i=0; i<data.length; i++){
              if(!data[i].available)
                data[i].description += '（禁）';
            }

            this.roles = data;
          });
      },
      methods: {
        save: function(){
          this.api.post('/user/bindrole', {userid: this.userData.userid, roleids: this.selected})
            .then((data) => {
              if(data.code==200){
                this.visible = false;
                this.$message({
                  message: data.message,
                  type: 'success'
                });
                this.$parent.query();
              }else{
                this.$message.error(data.message);
              }
            });
        }
      }
    }
</script>
